<template>
	<view class="payment">
		<view class="payment-header">
			<span class="span">需支付</span>
			<view class="header-price">
				<span style="font-size: 52rpx">￥</span>
				{{ payParams.totalPayment }}
			</view>
			<countdown-timer :time="payParams.expireSecond * 1000" :autoStart="true" @finish="handleBack">
				<template v-slot="{ hour, minute, second }">
					<h2>
						支付倒计时:
						<span style="margin-left: 20rpx" class="time">{{ hour > 9 ? hour : '0' + hour }}</span>
						:
						<span class="time">{{ minute > 9 ? minute : '0' + minute }}</span>
						:
						<span class="time">{{ second > 9 ? second : '0' + second }}</span>
					</h2>
				</template>
			</countdown-timer>
			<view class="p">{{ payParams.orderSourceDesc }}</view>
		</view>
		<!-- <view class="payment-warning">温馨提示：您的口腔健康报表已生成，查看需要收取￥1.00报表查看费，即可查看牙荷认证医生为您生成的专属报表。</view> -->

		<view class="payment-main">
			<view class="title">支付方式</view>
			<view class="main-item">
				<image src="@/static/wechat-icon.png" mode="aspectFill" class="img"></image>
				微信支付
				<!-- <image src="../../static/gray.jpg" mode="aspectFill" class="icon"></image> -->
			</view>
		</view>

		<view class="payment-footer">
			<!-- <view class="p">重选医生生成口腔报告 <uni-icons type="right" size="14" color="#6D6D6D"></uni-icons> </view> -->
			<view class="button" @click="handlePay">确认支付</view>
		</view>
	</view>
</template>

<script>
import countdownTimer from '@/components/countdown-timer.vue';

export default {
	components: { countdownTimer },
	data() {
		return {
			payParams: null
		};
	},
	onLoad(options) {
		this.$get(`/yahe/order/detail?orderId=${options.orderId}`)
			.then((res) => {
				if (res.success) {
					this.payParams = res.content;
				}
			})
			.catch((res) => {
				uni.showToast({
					title: res.message,
					icon: 'none'
				});
			});
	},
	methods: {
		handleBack() {
			///  返回
			uni.redirectTo({
				url: `/mineComponentPackage/component/member/index`
			});
		},
		getOpenId() {
			return new Promise((resolve) => {
				if (uni.getStorageSync('openID')) {
					resolve(uni.getStorageSync('openID'));
				} else {
					// #ifdef H5
					resolve(uni.getStorageSync('openID'));
					// #endif
					// #ifdef MP-WEIXIN
					uni.login({
						scopes: 'auth_base',
						onlyAuthorize: false,
						success: (res) => {
							this.$post('/yahe/login', {
								loginType: 'WECHAT',
								username: uni.getAccountInfoSync().miniProgram.appId,
								password: res.code
							}).then((res) => {
								if (res.code === '1') {
									uni.setStorageSync('openID', res.content.openId);
									resolve(res.content.openId);
								}
							});
						}
					});
					// #endif
					// #ifdef MP-TOUTIAO
					uni.login({
						scopes: 'auth_base',
						onlyAuthorize: false,
						success: (res) => {
							this.$post('/yahe/login', {
								loginType: 'DOUYIN',
								username: this.$mpAppid,
								password: res.code
							}).then((res) => {
								if (res.code === '1') {
									uni.setStorageSync('openID', res.content.openId);
									resolve(res.content.openId);
								}
							});
						}
					});
					// #endif
				}
			});
		},
		async handlePay() {
			uni.redirectTo({
				url: `/pages/mine/mine`
			});
			
			if (!this.payParams.totalPayment || this.payParams.totalPayment * 1 <= 0) {
				return;
			}
			/// 点击去支付
			uni.showLoading({
				title: '加载中...'
			});
			const data = {
				appId: this.$mpAppid,
				openId: await this.getOpenId(),
				orderId: this.payParams.orderId,
				channelType: 'WXPAY'
			};
			const ret = await this.$post('/yahe/order/pay', data);
			if (ret.code == '1') {
				let { content } = ret;
				// if (this.curPay == 0) {
				uni.requestPayment({
					timeStamp: content.timeStamp,
					nonceStr: content.nonceStr,
					package: content.package,
					signType: content.signType,
					paySign: content.paySign,
					success: (res) => {
						uni.hideLoading()
						this.handlePaySuccess(data);
					},
					fail: (err) => {
						uni.hideLoading()
						uni.showToast({
							title: '支付失败',
							icon: 'none'
						});
					}
				});
				// }
				// else {
				// 	tt.pay({
				// 		orderInfo: {
				// 			order_id: content.data.orderId,
				// 			order_token: content.data.orderToken
				// 		},
				// 		service: 5,
				// 		_debug: 1,
				// 		success: (res) => {
				// 			if (res.code == 0) {
				// 				this.handlePaySuccess(data);
				// 			}
				// 		},
				// 		fail: (err) => {
				// 			uni.showToast({
				// 				title: '支付失败',
				// 				icon: 'none'
				// 			});
				// 		}
				// 	});
				// }
			} else {
				uni.hideLoading()
				uni.showToast({
					title: ret.message,
					icon: 'none'
				});
			}
		},
		handlePaySuccess(data) {
			uni.switchTab({
				url: `/pages/mine/mine`
			});
		}
	}
};
</script>

<style lang="less" scoped>
.payment {
	padding: 0 24rpx;
	.payment-header {
		padding: 92rpx 0 60rpx;
		font-size: 26rpx;
		color: #6d6d6d;
		text-align: center;
		margin-top: 20rpx;
		.span {
			color: var(--sub-title);
		}
		.p  {
			margin-top: 20rpx;
		}
		.header-price {
			font-size: 72rpx;
			font-weight: bold;
			margin: 24rpx 0;
			color: var(--title-color);
		}
		.time {
			padding: 2rpx 8rpx;
			background: #f96b27;
			color: #fff;
			border-radius: 8rpx;
			margin:0  5rpx;
		}
	}

	.payment-warning {
		padding: 20rpx 40rpx;
		border-radius: 20rpx;
		background: #fff3ed;
		color: var(--sub-theme);
		font-size: 24rpx;
		line-height: 36rpx;
		letter-spacing: 2rpx;
	}

	.payment-main {
		margin-top: 60rpx;
		border-top: 2rpx solid #efefef;
		padding: 40rpx 0;
		.title {
			color: #b0b0b0;
			font-size: 26rpx;
			margin-bottom: 40rpx;
			text-align: center;
		}
		.main-item {
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 100rpx;
			font-size: 28rpx;
			color: var(--title-color);
			.img {
				width: 44rpx;
				height: 44rpx;
				margin-right: 22rpx;
			}
			.icon {
				width: 40rpx;
				height: 40rpx;
				margin-left: auto;
			}
		}
	}

	.payment-footer {
		position: fixed;
		bottom: 60rpx;
		left: 24rpx;
		right: 24rpx;
		.p {
			font-size: 24rpx;
			color: #6d6d6d;
			margin-bottom: 44rpx;
			text-align: center;
		}
		.button {
			color: #fff;
			font-size: 28rpx;
			line-height: 80rpx;
			border-radius: 80rpx;
			text-align: center;
			background: linear-gradient(90deg, #29d8c6 0%, #10beaf 100%);
		}
	}
}
</style>
